<template>
    <div>
        <Tabs
            type="card"
            :animated="false"
            :value="currentTab"
            @on-click="handleTabChange">
            <TabPane
                v-for="tab in tabs"
                :key="tab.name"
                :name="tab.name"
                :label="tab.label">
                <component :is="tab.component" v-if="tab.loaded"></component>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    import saasLog from './saas-log'
import openapiLog from './openapi-log'

export default {
      name: 'log-container',
      components: {
        saasLog,
        openapiLog
      },
      data () {
        return {
          currentTab: 'saasLog',
          tabs: [
            {
              component: 'saasLog',
              name: 'saasLog',
              label: 'SaaS操作记录',
              loaded: true
            },
            {
              component: 'openapiLog',
              name: 'openapiLog',
              label: '第三方接口调用记录',
              loaded: false
            }
          ]
        }
      },
      methods: {
        handleTabChange (name) {
          this.currentTab = name
          const index = this.tabs.findIndex(tab => tab.name === name)
          if (index < 0) return
          if (!this.tabs[index].loaded) {
            this.$set(this.tabs[index], 'loaded', true)
          }
        }
      }
    }
</script>